<!--
 * @Author: early-autumn
 * @Date: 2020-05-09 16:26:45
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-06 15:46:08
 -->
<template>
  <div v-loading="loading" class="treatment">
    <el-timeline v-if="total > 0">
      <el-timeline>
        <el-timeline-item
          v-for="seeing in seeingList"
          :key="seeing.id"
          placement="top"
          type="primary"
          :timestamp="seeing.updateTime"
        >
          <el-card class="card__container" shadow="hover">
            <ul class="card__content-list">
              <li class="card__content-item">
                <span class="card__content-item-label">TC：</span>
                <span>{{ seeing.userName }}</span>
              </li>
              <li class="card__content-item">
                <span class="card__content-item-label">详情：</span>
                <span>{{ seeing.result }}</span>
              </li>
            </ul>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-timeline>
    <empty v-else></empty>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListRunning"
    ></pagination>
  </div>
</template>

<script>
import { listRunning } from '@/api/services/running'
import { reachStatusOptions } from '@/utils/options'

import Empty from '@/components/yiya/Empty'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 10,
}
export default {
  name: 'SeeingRecordPane',
  components: {
    Empty,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {},
      seeingList: [],
    }
  },
  mounted() {
    this.queryParams = {
      ...QUERY_PARAMS,
      clinicPersonId: this.patient.id,
    }
    this.getListRunning()
  },
  methods: {
    async getListRunning() {
      try {
        this.loading = true
        const { rows, total } = await listRunning(this.queryParams)
        this.seeingList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.treatment {
  width: 100%;
  min-height: 700px;
}

.card__container {
  width: 500px;
  position: relative;

  .card__content-list {
    padding-left: 0;

    .card__content-item {
      padding-left: 0;
      display: flex;

      .card__content-item-label {
        min-width: 60px;
        display: inline-block;
      }
    }

    .card__content-item:first-child {
      margin-bottom: 5px;
    }
  }
}
</style>
